<template>
  <div class="hzy_add">
    <!-- 新增调拨单 -->
    <el-dialog title="新增调拨单" :visible.sync="dialogFormVisible">
      <div class="hzy_add_box">
        <div class="hzy_list">
          <el-form
            :inline="true"
            :model="AddTransferOrders"
            class="demo-form-inline"
          >
            <el-form-item label="商品类型">
              <el-select v-model="AddTransferOrders.newGoodsType">
                <el-option
                  v-for="item in goodsType"
                  :key="item.gType"
                  :value="item.gType"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="系数" style="padding-left: 60px">
              <el-input
                placeholder="请输入系数"
                v-model="AddTransferOrders.newCoefficient"
              ></el-input>
            </el-form-item>
            <el-form-item label="单据编号">
              <el-input :disabled="true"> </el-input>
            </el-form-item>
            <el-form-item label="创单日期" style="padding-left: 30px">
              <el-input :disabled="true" :value="time"> </el-input>
            </el-form-item>
          </el-form>
          <el-form
            :inline="true"
            :model="AddTransferOrders"
            class="demo-form-inline"
          >
            <el-form-item label="出库门店">
              <el-select v-model="AddTransferOrders.newOut">
                <el-option
                  v-for="item in outGoods"
                  :key="item.outGoodsStore"
                  :value="item.outGoodsStore"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="柜台/类库名称">
              <el-select v-model="AddTransferOrders.newOutCounterName">
                <el-option
                  v-for="item in outCounter"
                  :key="item.outCounterCo"
                  :value="item.outCounterCo"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库门店">
              <el-select v-model="AddTransferOrders.newStorage">
                <el-option
                  v-for="item in newStorageName"
                  :key="item.newStorageId"
                  :value="item.newStorageId"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="柜台/类库名称">
              <el-select v-model="AddTransferOrders.newStorageCounterName">
                <el-option
                  v-for="item in newStorageCounter"
                  :key="item.newStorageCounterId"
                  :value="item.newStorageCounterId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <!-- 新增调拨表格 -->
          <el-table :data="newData" border style="width: 100%">
            <el-table-column fixed prop="newGoodsId" label="行号" width="150">
            </el-table-column>
            <el-table-column prop="productId" label="商品编码" width="120">
            </el-table-column>
            <el-table-column prop="productName" label="商品名称" width="120">
            </el-table-column>
            <el-table-column prop="touchID" label="模具号" width="120">
            </el-table-column>
            <el-table-column prop="EcommerceId" label="电商款号" width="120">
            </el-table-column>
            <el-table-column prop="paragraphId" label="款号" width="120">
            </el-table-column>
            <el-table-column prop="classify" label="分类1" width="120">
            </el-table-column>
            <el-table-column prop="certificate" label="证书1" width="120">
            </el-table-column>
            <el-table-column prop="quality" label="成色" width="120">
            </el-table-column>
            <el-table-column prop="productWidth" label="重量" width="120">
            </el-table-column>
            <el-table-column prop="oneWidth" label="单件重" width="120">
            </el-table-column>
            <el-table-column prop="productNum" label="数量" width="120">
            </el-table-column>
            <el-table-column prop="fingerSize" label="手寸" width="120">
            </el-table-column>
            <el-table-column prop="materialPrice" label="料价" width="120">
            </el-table-column>
            <el-table-column prop="salesCosts" label="销售工费" width="120">
            </el-table-column>
            <el-table-column
              prop="surcharge"
              label="附加费"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="seriesName"
              label="系列名称"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="remark"
              label="备注"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="brand"
              label="品牌"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="priceType"
              label="价格类型"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="labelPrice"
              label="标签单价"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="costBased"
              label="成本计价"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="salesPricing"
              label="销售计价"
              width="120"
            ></el-table-column>
            <el-table-column
              prop="salesCostsPriced"
              label="销售工费计价"
              width="120"
            >
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="210">
              <template slot-scope="scope">
                <el-button
                  type="success"
                  size="small"
                  @click="editNewDate(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="danger"
                  size="small"
                  @click="delNewDate(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page.sync="currentPageSync"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            layout="sizes, prev, pager, next"
            :total="totalCount"
          >
          </el-pagination>
          <div class="hzy_choose">
            <el-row>
              <el-button type="primary hzy_btn_height">选择出库商品</el-button>
              <el-button type="success hzy_btn_height" @click="BatchEncoding"
                >批量编码</el-button
              >
              <el-button type="info hzy_btn_height">完成出库</el-button>
            </el-row>
          </div>
        </div>
        <div class="hzy_new_footer">
          <div class="hzy_foot_btn">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 编辑新建调拨表格 -->
    <div class="hzy_edit">
      <el-dialog
        title="编辑商品信息"
        :visible.sync="dialogVisible"
        width="1300px"
        :before-close="handleClose"
      >
        <span>
          <el-form
            :inline="true"
            class="demo-form-inline"
            :model="addAllocateList"
          >
            <el-form-item label="行号">
              <el-input
                :disabled="true"
                v-model="addAllocateList.newGoodsId"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品编码">
              <el-input
                :disabled="true"
                v-model="addAllocateList.productId"
              ></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input
                :disabled="true"
                v-model="addAllocateList.productName"
              ></el-input>
            </el-form-item>
            <el-form-item label="摸具号">
              <el-input
                :disabled="true"
                v-model="addAllocateList.touchID"
              ></el-input>
            </el-form-item>
            <el-form-item label="电商款号">
              <el-input
                :disabled="true"
                v-model="addAllocateList.EcommerceId"
              ></el-input>
            </el-form-item>
            <el-form-item label="款号">
              <el-input
                placeholder="请输入"
                :disabled="true"
                v-model="addAllocateList.paragraphId"
              ></el-input>
            </el-form-item>
            <el-form-item label="分类1">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.classify"
              ></el-input>
            </el-form-item>
            <el-form-item label="证书1">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.certificate"
              ></el-input>
            </el-form-item>
            <el-form-item label="成色">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.quality"
              ></el-input>
            </el-form-item>
            <el-form-item label="重量">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.productWidth"
              ></el-input>
            </el-form-item>
            <el-form-item label="单件重">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.oneWidth"
              ></el-input>
            </el-form-item>
            <el-form-item label="数量">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.productNum"
              ></el-input>
            </el-form-item>
            <el-form-item label="手寸">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.fingerSize"
              ></el-input>
            </el-form-item>
            <el-form-item label="料价">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.materialPrice"
              ></el-input>
            </el-form-item>
            <el-form-item label="销售工费">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.salesCosts"
              ></el-input>
            </el-form-item>
            <el-form-item label="附加费">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.surcharge"
              ></el-input>
            </el-form-item>
            <el-form-item label="系列名称">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.seriesName"
              ></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.remark"
              ></el-input>
            </el-form-item>
            <el-form-item label="品牌">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.brand"
              ></el-input>
            </el-form-item>
            <el-form-item label="卖价">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.priceType"
              ></el-input>
            </el-form-item>
            <el-form-item label="标签单价">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.labelPrice"
              ></el-input>
            </el-form-item>
            <el-form-item label="成本计价">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.costBased"
              ></el-input>
            </el-form-item>
            <el-form-item label="销售计价">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.salesPricing"
              ></el-input>
            </el-form-item>
            <el-form-item label="销售工费">
              <el-input
                placeholder="请输入"
                v-model="addAllocateList.salesCostsPriced"
              ></el-input>
            </el-form-item>
          </el-form>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button :plain="true" type="primary" @click="SaveMsg"
            >保存</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getNewGoldList, getNewGoldTotal } from "@/http/StoresAllocateApi";
export default {
  name: "addAllocateInfo",
  props: ["isShowAddAllocateInfo"],
  mounted() {
    this.dialogFormVisible = this.isShowAddAllocateInfo;
  },
  watch: {
    dialogFormVisible: function () {
      if (!this.dialogFormVisible) {
        this.$emit("closeAdd");
      }
    },
  },
  data() {
    return {
      AddTransferOrders: {
        // 新增调拨单
        newGoodsType: "",
        newCoefficient: "",
        newOut: "",
        newOutCounterName: "",
        newStorage: "",
        newStorageCounterName: "",
      },
      time: "",
      dialogFormVisible: false, // 新建调拨表格界面显示状态
      dialogVisible: false, // 新建调拨表格编辑界面
      newData: [],
      addAllocateList: {},
      goodsType: [
        // 商品类型
        {
          gType: "素金类",
        },
        {
          gType: "镶嵌类",
        },
        {
          gType: "其他标价类",
        },
      ],
      outGoods: [
        // 出库门店
        {
          outGoodsStore: "望京分店",
        },
        {
          outGoodsStore: "王府井分店",
        },
        {
          outGoodsStore: "公司总部",
        },
      ],
      outCounter: [
        // 出库柜台
        {
          outCounterCo: "素金类",
        },
        {
          outCounterCo: "镶嵌类",
        },
      ],
      newStorageName: [
        // 入库门店
        {
          newStorageId: "望京分店",
        },
        {
          newStorageId: "王府井分店",
        },
        {
          newStorageId: "公司总部",
        },
      ],
      newStorageCounter: [
        // 入库柜台
        {
          newStorageCounterId: "素金类",
        },
        {
          newStorageCounterId: "镶嵌类",
        },
      ],
      currentPageSync: 1, // 新增调拨页面的当前页
      page: 10, // 新增调拨页面展示的数量
      totalCount: 0, // 新增调拨页面总数量
    };
  },
  created() {
    // 实例化创建完成
    this.getInitialize(this.currentPageSync, this.page);
  },
  methods: {
    editNewDate(index, row) {
      console.log(index, row);
      this.AddTransferOrders = row;
      this.addAllocateList = row;
      this.dialogVisible = true;
    },
    delNewDate(newId) {
      // 删除新增调拨列表数据
      console.log(newId);
      this.$confirm("此操作将永久删除该数据, 是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.newData.splice(newId, 1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    sizeChange(page) {
      // 新增调拨表格每页展示的数量
      console.log("每页" + page + "条");
    },
    currentChange(currentPageSync) {
      // 新增调拨表格当前页
      console.log("当前页:", currentPageSync);
      this.currentPageSync = currentPageSync;
      this.getInitialize(currentPageSync, this.page);
    },
    getInitialize(currentPageSync, page) {
      getNewGoldTotal()
        .then((res) => {
          this.totalCount = res.data.data;
        })
        .catch((err) => {
          console.log("获取总数量失败：", err);
        });
      getNewGoldList(currentPageSync, page)
        .then((res) => {
          this.newData = res.data.data;
        })
        .catch((err) => {
          console.log("获取总数量失败：", err);
        });
    },
    addInfo() {
      this.$emit("openNewList");
      this.dialogFormVisible = true;
    },
    BatchEncoding() {
      this.$prompt("请输入或粘贴编码", "提示", {
        confirmButtonText: "提交",
        cancelButtonText: "取消",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "提交成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    SaveMsg() {
      this.dialogVisible = false;
      this.$message({
        message: "保存成功",
        type: "success",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.hzy_add_box {
  position: relative;

  .hzy_choose {
    position: absolute;
    right: 30px;
    top: 0;

    .hzy_btn_height {
      height: 100px;
    }
  }
}
.hzy_new_footer {
  position: relative;
  height: 40px;

  .hzy_foot_btn {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.el-input,
.el-select {
  width: 115px;
}
</style>
<style>
.el-dialog__header {
  text-align: center;
}
.el-dialog {
  margin-left: 220px;
  width: 1300px;
  text-align: left;
}
</style>